<template>
	<div class="direct-account-opening">
		<p class="header">可在直属数据>直属用户列表，修改默认返佣</p>
		<div class="login-form">
			<nut-input class="input" v-model="account" placeholder="账号" :border="false"></nut-input>
			<nut-input class="input" v-model="password" placeholder="密码" :border="false" :type="showPassword? 'password' : 'text'">
				<template #right>
					<iconpark-icon @click="showPassword = !showPassword" :icon-id="showPassword ? 'eye11' : 'hide-g2036259'" size="1.2rem"></iconpark-icon>
				</template>
			</nut-input>
			<nut-button class="login-button" type="primary" @click="login">提交开户</nut-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const account = ref('');
const password = ref('');
const showPassword = ref<boolean>(true);

const login = () => {
	console.log('账号:', account.value, '密码:', password.value);
	// 在这里添加登录逻辑
};
</script>

<style lang="scss" scoped>
.direct-account-opening {
	width: 100%;
	box-sizing: border-box;

	.header {
		height: 32px;
		padding: 10px 14px;
		color: #FF5252;
		font-size: 12px;
		margin-bottom: 14px;
		background: #131232;
		display: flex;
		align-items: center;
	}

	.login-form {
		display: flex;
		flex-direction: column;
		padding: 0 14px;
		gap: 14px;
	}

	.input {
		display: flex;
		height: 48px;
		padding: 0 14px;
		align-items: center;
		align-self: stretch;
		background: #1d1c3c;
		box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
		border-radius: 8px;
		color: #c6c4f5;
		font-size: 14px;

		:deep(.input-text::placeholder) {
			color: #504f6f;
		}
	}

	.login-button {
		background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
		color: #fff;
		border-radius: 8px;
		margin-top: 10px;
	}
}
</style>
